<template>
  <div>
    <div class="btn-circle flex-cnt-cnt" v-bind:class="btnClass" v-on:click="handle">
      <span class="icon" v-bind:class="icon"></span>
    </div>

    <slot></slot>
  </div>
</template>

<script>
  import MyMixin from 'Utils/modal-mixin.js';
  
  export default {
    name: 'btn-circle',
    mixins: [ MyMixin ],
    props: {
      'btnClass': {
        type: String
      },
      'icon': {
        type: String
      }
    },
    methods: {
      handle () {
        this.$emit('handle')
      }
    }
  }
</script>

<style lang="less" scoped>
  .btn-circle {
    position: fixed;
    bottom: 70px;
    right: 20px;
    border-radius: 50%;
    background-color: #FDC93E;
    width: 60px;
    height: 60px;
    color: #fff;
    box-shadow: 1px 1px 5px #999;
    z-index: 999;
    .icon {
      font-size: 26px;
    }
  }
</style>
